<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";
import { QuestionFilled } from "@element-plus/icons-vue";
import dynamicForm from "@/components/DynamicForm/index.vue";
import { FormItemConfig } from "@/components/DynamicForm/types";
import { DynamicTable } from "@/components/DynamicTable";
import { TableColumn } from "@/components/DynamicTable/types";

const columns = ref<TableColumn[]>([
  {
    label: "运算符",
    prop: "operator",
  },
  {
    label: "含义",
    prop: "meaning",
  },
]);

const data = ref([
  {
    operator: "=",
    meaning: "匹配，表示查询包含关键词资产（支持正则输入）",
  },
  {
    operator: "!=",
    meaning: "剔除，表示剔除包含关键词资产",
  },
  {
    operator: "==",
    meaning: "精准匹配，表示仅查询关键词资产",
  },
  {
    operator: "&&",
    meaning: "与条件",
  },
  {
    operator: "||",
    meaning: "或条件",
  },
  {
    operator: "()",
    meaning: "括号内容优先级最高",
  },
]);

const keywordColumns = ref<TableColumn[]>([
  {
    label: "关键字",
    prop: "keyword",
  },
  {
    label: "示例",
    prop: "example",
  },
  {
    label: "说明",
    prop: "meaning",
  },
]);

const keywordData = ref([
  {
    keyword: "app",
    example: 'app="Nginx"',
    meaning: "检索指定组件",
  },
  {
    keyword: "body",
    example: 'body="bootstrap.min.css"',
    meaning: "检索HTTP响应体",
  },
  {
    keyword: "header",
    example: 'header="rememberMe"',
    meaning: "检索HTTP请求头",
  },
  {
    keyword: "title",
    example: 'title="admin console"',
    meaning: "检测网站标题",
  },
  {
    keyword: "statuscode",
    example: 'statuscode=="403"',
    meaning: "检索响应码，不支持模糊查找",
  },
  {
    keyword: "icon",
    example: 'icon="54256234"',
    meaning: "根据网站图标hash检索",
  },
  {
    keyword: "ip",
    example: 'ip="192.168.2.1"',
    meaning: "检索IP",
  },
  {
    keyword: "port",
    example: 'port="3306"',
    meaning: "检索端口",
  },
  {
    keyword: "domain",
    example: 'domain="example.com"',
    meaning: "检索域名",
  },
  {
    keyword: "service",
    example: 'service="ssh"',
    meaning: "根据服务检索",
  },
  {
    keyword: "banner",
    example: 'banner="SSH-2.0-OpenSSH"',
    meaning: "检索非HTTP资产的Banner",
  },
  {
    keyword: "project",
    example: 'project="Hackerone"',
    meaning: "根据项目名称检索",
  },
  {
    keyword: "type",
    example: 'type="http"',
    meaning: "根据服务检索",
  },
  {
    keyword: "task",
    example: 'task=="test"',
    meaning: "根据任务名称检索，仅支持精确查找",
  },
  {
    keyword: "tag",
    example: 'tag=="test"',
    meaning: "查找标签",
  },
]);

interface Props {
  // formConfig: FormItemConfig[];
  modelValue: any;
  labelWidth?: string;
  gutter?: number;
}

interface Emits {
  (e: "update:modelValue", value: any): void;
  (e: "search", value: any): void;
  (e: "reset"): void;
}

// 控制dialog显示状态
const dialogVisible = ref(false);

// 点击问号icon的处理函数
const handleHelpClick = () => {
  dialogVisible.value = true;
};

const formConfig: FormItemConfig[] = [
  {
    key: "search",
    name: "搜索",
    type: "input",
    placeholder: "搜索",
    params: {
      maxLength: 50,
      clearable: true,
      suffixIcon: QuestionFilled,
      suffixIconClick: handleHelpClick,
    },
  },
];

const props = withDefaults(defineProps<Props>(), {
  labelWidth: "60px",
  gutter: 16,
});

const emit = defineEmits<Emits>();

const handleSearch = (v: any) => {
  emit("search", v);
};

const handleReset = () => {
  emit("reset");
};

const handleModelUpdate = (value: any) => {
  emit("update:modelValue", value);
};

// 关闭dialog
const handleCloseDialog = () => {
  dialogVisible.value = false;
};
</script>

<template>
  <el-card>
    <dynamicForm
      :form-config="formConfig"
      :model-value="modelValue"
      @update:model-value="handleModelUpdate"
      type="search"
      :gutter="gutter"
      @search="handleSearch"
      @reset="handleReset"
      :label-width="labelWidth"
    />
  </el-card>

  <!-- 帮助信息弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="查询语法"
    width="640px"
    :before-close="handleCloseDialog"
  >
    <div class="help-content">
      <div>运算符 | <span style="color: red">关键字需要用双引号包裹</span></div>
      <DynamicTable :columns="columns" :data="data" />
      <div style="margin-top: 14px">关键字</div>
      <DynamicTable :columns="keywordColumns" :data="keywordData" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloseDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.help-content {
  margin-top: -20px;
  max-height: 500px;
  overflow-y: auto;
  ul {
    margin: 8px 0;
    padding-left: 20px;

    li {
      margin: 4px 0;
      color: #666;
      font-size: 13px;
      line-height: 1.5;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
